#page-9 {
  display: none;
  position: absolute;
  @include square(100%);
  background-image: url("../image/page-9-bg.jpg");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;

  > .tong {
    position: absolute;
    @include size(px2rem-b(1118px), px2rem-b(758px));
    background-image: url("../image/page-9-tong.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
  }

  > .blink {
    //270 / 416 473
    position: absolute;
    @include square(px2rem-b(1372px));
    top: px2rem-b(368px - 686px);
    right: px2rem-b(461px - 686px);
  }

  .uphui {
    @include size(px2rem-b(295px), px2rem-b(105px));
    position: absolute;
    top: px2rem-b(317px);
    right: px2rem-b(217px);
    background-image: url("../image/page-9-zs-1.png");
    background-size: 100% 100%;
    opacity: 0;
  }

  .line {
    position: absolute;
    height: px2rem-b(226px);
    background-image: url("../image/page-9-zs-2.png");
    background-size: auto 100%;
    background-position: right;
    width: 0;
    top: px2rem-b(307px);
    right: px2rem-b(509px);
  }

  .zs-1 {
    position: absolute;
    @include size(px2rem-b(456px), px2rem-b(218px));
    background-image: url("../image/page-9-zs-4.png");
    background-size: 100% 100%;
    top: px2rem-b(293px);
    right: px2rem-b(928px);
    display: none;
  }

  .zs-2 {
    position: absolute;
    @include size(px2rem-b(456px), px2rem-b(218px));
    background-image: url("../image/page-9-zs-6.png");
    background-size: 100% 100%;
    top: px2rem-b(293px);
    right: px2rem-b(928px);
    transform: translate(4.6093rem, -0.5rem);
    -webkit-transform: translate(4.6093rem, -0.5rem);
    opacity: 0;
  }

  .zs-3 {
    position: absolute;
    @include size(px2rem-b(583px), px2rem-b(128px));
    background-image: url("../image/page-9-zs-3.png");
    background-size: 100% 100%;
    top: px2rem-b(529px);
    right: px2rem-b(821px);
    display: none;
  }

  .zs-4 {
    position: absolute;
    background-image: url("../image/page-9-zs-7.png");
    background-size: 100% 100%;
    @include size(px2rem-b(426px), px2rem-b(172px));
    top: px2rem-b(670px);
    right: px2rem-b(971px);
    display: none;
  }

  .zs-5 {
    position: absolute;
    @include size(px2rem-b(456px), px2rem-b(218px));
    background-image: url("../image/page-9-zs-5.png");
    background-size: 100% 100%;
    top: px2rem-b(293px);
    right: px2rem-b(928px);
    transform: translate(4.6093rem, -0.5rem);
    -webkit-transform: translate(4.6093rem, -0.5rem);
    opacity: 0;
  }

  .zs-6 {
    position: absolute;
    @include size(px2rem-b(583px), px2rem-b(128px));
    background-image: url("../image/page-9-zs-9.png");
    background-size: 100% 100%;
    top: px2rem-b(529px);
    right: px2rem-b(810px);
    display: none;
  }

  .zs-7 {
    position: absolute;
    background-image: url("../image/page-9-zs-8.png");
    background-size: 100% 100%;
    @include size(px2rem-b(426px), px2rem-b(172px));
    top: px2rem-b(670px);
    right: px2rem-b(971px);
    display: none;
  }

  .zs-8 {
    position: absolute;
    background-image: url("../image/page-9-zs-10.png");
    background-size: 100% 100%;
    @include size(px2rem-b(311px), px2rem-b(380px));
    top: px2rem-b(279px);
    right: px2rem-b(1397px);
    display: none;
  }

  .ol-1 {
    position: absolute;
    background-image: url("../image/page-9-o-1.png");
    background-size: 100% 100%;
    @include size(px2rem-b(311px), px2rem-b(380px));
    top: px2rem-b(279px);
    right: px2rem-b(1397px);
    animation: oiled 3s linear;
    -webkit-animation: oiled 3s;
    opacity: 0;
    display: none;
  }

  .ol-2 {
    position: absolute;
    background-image: url("../image/page-9-o-4.png");
    background-size: 100% 100%;
    @include size(px2rem-b(311px), px2rem-b(380px));
    top: px2rem-b(279px);
    right: px2rem-b(1397px);
    opacity: 0;
  }

  .ol-3 {
    position: absolute;
    background-image: url("../image/page-9-o-3.png");
    background-size: 100% 100%;
    @include size(px2rem-b(311px), px2rem-b(380px));
    top: px2rem-b(279px);
    right: px2rem-b(1397px);
    opacity: 0;
  }

  .ol-4 {
    position: absolute;
    background-image: url("../image/page-9-o-2.png");
    background-size: 100% 100%;
    @include size(px2rem-b(311px), px2rem-b(380px));
    top: px2rem-b(279px);
    right: px2rem-b(1397px);
    opacity: 0;
  }

}

@keyframes oiled {
  from {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 0.84375rem);
    -webkit-transform: translate(0, 0.84375rem);
  }
}

@-webkit-keyframes oiled {
  from {
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(0, 0.84375rem);
    -webkit-transform: translate(0, 0.84375rem);
  }
}

@keyframes oile {
  from {
    background-image: url("../image/page-9-o-4.png");
  }

  50% {
    background-image: url("../image/page-9-o-3.png");
  }

  to {
    background-image: url("../image/page-9-o-2.png");
  }
}

@-webkit-keyframes oile {
  from {
    background-image: url("../image/page-9-o-4.png");
  }

  50% {
    background-image: url("../image/page-9-o-3.png");
  }

  to {
    background-image: url("../image/page-9-o-2.png");
  }
}